<template>
  <el-container class="container">
    <el-header height="100%">
      <el-form :model="form" ref="form" label-width="80px" class="form">
        <el-row>
          <el-col :span="6">
            <el-form-item label="模块名称" prop="title">
              <el-input v-model="form.title" clearable placeholder="请输入模块名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="操作类型" prop="businessType">
              <el-select v-model="form.businessType" clearable placeholder="请选择操作类型">
                <el-option v-for="bizType in bizTypeList"
                           :key="bizType.code"
                           :label="bizType.desc"
                           :value="bizType.code"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="操作人" prop="operName">
              <el-input v-model="form.operName" clearable placeholder="请输入操作人名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态" prop="status">
              <el-select v-model="form.status" clearable placeholder="请选择状态">
                <el-option label="成功" value="0"/>
                <el-option label="失败" value="1"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="操作时间">
              <el-row>
                <el-col :span="11">
                  <el-date-picker v-model="form.startTime" type="datetime" placeholder="开始日期" style="width: 100%;"/>
                </el-col>
                <el-col :span="2" class="line">-</el-col>
                <el-col :span="11">
                  <el-date-picker v-model="form.endTime" type="datetime" placeholder="结束日期" style="width: 100%;"/>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="40px">
              <el-button type="primary" @click="onSubmit" icon="el-icon-search">搜索</el-button>
              <el-button @click="resetForm('form')" icon="el-icon-refresh">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <!--        <el-row style="padding-left: 10px">
                  <el-button type="primary" plain icon="el-icon-plus" @click="showAddDialog">新增</el-button>
                  <el-button type="success" plain icon="el-icon-edit" @click="showModifyDialog()"
                             :disabled="multipleSelection.length !== 1">修改
                  </el-button>
                  <el-button type="danger" plain icon="el-icon-delete" :disabled="multipleSelection.length === 0"
                             @click="handlerRemove()">删除
                  </el-button>
                  <el-button type="info" plain icon="el-icon-upload2">导入</el-button>
                  <el-button type="warning" plain icon="el-icon-download">导出</el-button>
                </el-row>-->
      </el-form>
    </el-header>
    <el-main>
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
      >
        <el-table-column
          prop="operId"
          label="日志编号"
          width="80">
        </el-table-column>
        <el-table-column
          prop="title"
          label="系统模块"
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="businessType"
          label="操作类型"
          min-width="120">
          <template slot-scope="scope">
            {{ scope.row.businessType | filterBizType }}
          </template>
        </el-table-column>
        <el-table-column
          prop="requestMethod"
          label="请求方式"
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="operUrl"
          label="请求URL"
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="operName"
          label="操作人员"
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="operIp"
          label="操作地址"
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="operLocation"
          label="操作地点"
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="status"
          label="操作状态"
          min-width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 0" type="success">成功</el-tag>
            <el-tag v-else type="danger">失败</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="operTime"
          label="操作日期"
          min-width="120">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          min-width="120">
          <template slot-scope="scope">
            <el-row>
              <el-button type="text" icon="eye" @click="showOperLog(scope.row.userId)" size="small">详细
              </el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer height="30px">
      <el-row>
        <el-col :span="24" class="line">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="[5, 10 ,15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </el-col>
      </el-row>
    </el-footer>
  </el-container>
</template>

<script>
import operApi from "@/api/system/oper";

let bizTypeList = [];
export default {
  name: "index",
  data() {
    return {
      pageNo: 1,
      pageSize: 5,
      total: 10,
      form: {},
      tableData: [],
      bizTypeList: bizTypeList
    }
  },
  created() {
    this.getBizTypeList();
    this.fetchData(1);
  },
  filters: {
    filterBizType(code) {
      let find = bizTypeList.find(bizType => bizType.code === code);
      return !!find ? find.desc : '其他';
    }
  },
  methods: {
    fetchData(pageNo = this.pageNo, pageSize = this.pageSize, searchObj = this.form) {
      operApi.getList(pageNo, pageSize, searchObj)
        .then(res => {
          const returnData = res.data;
          this.pageNo = returnData.pageNum;
          this.total = returnData.total;
          this.tableData = returnData.list;
        })
    },
    getBizTypeList() {
      operApi.getBizTypeList()
        .then(res => {
          this.bizTypeList = res.data;
          bizTypeList = this.bizTypeList;
        })
    },

    showOperLog(id) {

    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData(1);
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.fetchData();
    },
    onSubmit() {
      this.fetchData(1);
    },
    resetForm(formName) {
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields();
        this.form.endTime = '';
        this.form.startTime = '';
      }
      this.fetchData(1);
    },

  },
}
</script>

<style scoped>
.line {
  text-align: center;
}

.container {
  padding: 20px 10px;
}
</style>
